<!DOCTYPE html>
<html>
  
<head>
  <meta charset="utf-8">
  <meta name="author" content="饿包子" />
  
  
  <title>【转载】彻底理解js中this的指向 | 饿包子博客</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="文章转载," />
  

  
  <meta name="description" content="该文章为转载文章，因为很多时候看到一篇文章，但过段时间就可能会被删除，所以先转载过来，怕不知道什么时候就没了或找不到。作者要是联系，我也会删除。文章不代表本人观点">

  
  
    <link rel="icon" href="/blog/images/xian.ico">
    <link rel="apple-touch-icon" href="/blog/images/Logo.png">
  

  
<link rel="stylesheet" href="/blog/css/Awesome.min.css">


  
<link rel="stylesheet" href="/blog/css/index.css">
<link rel="stylesheet" href="/blog/styles/components/highlight/highlight.css">


  
  
<script src="/blog/common/jquery.min.js"></script>

  
    
<script src="/blog/common/Av.min.js"></script>

  

  
    
<script src="/blog/common/MathJax.js"></script>

  

  
    
<script src="/blog/common/Valine.min.js"></script>

  

  

  <script>
  // theme-ad's config script
  // it can be used in every script
  
  window.AD_CONFIG = {
    leancloud: {"appid":"gE1EosDsVgB2slV4E92yPkcG-gzGzoHsz","appkey":"niR787UVTMyJQrR6gmOiJCKe","comment":true,"count":true},
    welcome: {"enable":false,"interval":30},
    start_time: "2018-06-10",
    passwords: ["a621ab606db2a11f63edc576a729843b8269250dc324206871d90635ac5e531c", ],
    is_post: true,
    lock: false,
    author: "饿包子",
    share: {"twitter":false,"facebook":false,"weibo":true,"qq":true,"wechat":false},
    mathjax: true,
    page_type: "",
    root: "/blog/"
  };
</script>

  
<script src="/blog/vendor/sha256.min.js"></script>
<script src="/blog/js/auth.js"></script>
<script src="/blog/js/index.js"></script>
<script src="/blog/vendor/qrcode.min.js"></script>


<meta name="generator" content="Hexo 5.4.2"></head>
  <body>
    <header class="site-header">
  <div class="site-header-brand">
    
      <span class="site-header-brand-title">
        <a href="/blog/">清风逐月</a>
      </span>
    
    
      <span class="site-header-brand-motto"> | 我思故我在</span>
    
  </div>
  <div class="site-header-right">
    <nav class="site-header-navigation">
      
        <a href="/blog/" target="_self">主页</a>
      
        <a href="/blog/archives/" target="_self">归档</a>
      
        <a href="/blog/tags/" target="_self">标签</a>
      
        <a href="/blog/categories/" target="_self">分类</a>
      
        <a href="/blog/categories/%E6%97%A5%E8%AE%B0" target="_self">日记</a>
      
    </nav>
    <div class="site-header-btn">
      
        <a href="https://github.com/lixianbin1/" target="_blank" id="site-github">
          <i class="fa fa-github-alt"></i>
        </a>
      
      <a href="javascript:void(0);" id="site-search">
        <i class="fa fa-search"></i>
      </a>
      <a href="javascript:void(0);" id="site-nav-btn">
        <i class="fa fa-ellipsis-v"></i>
      </a>
    </div>
  </div>
</header>
<nav class="table-content" id="site-nav">
  <div class="table-content-title">
    <span>导航</span>
  </div>
  <div class="table-content-main">
    <ol class="toc">
      
        <li class="toc-item">
          <a href="/blog/" target="_self">
            主页
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/archives/" target="_self">
            归档
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/tags/" target="_self">
            标签
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/categories/" target="_self">
            分类
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/categories/%E6%97%A5%E8%AE%B0" target="_self">
            日记
          </a>
        </li>
      
    </ol>
  </div>
</nav>
<div id="site-process"></div>
    <main>
      
  <div class="passage">
  <div class="passage-meta">
    <span>
      <i class="fa fa-calendar"></i>2020-07-15
    </span>
    
      <span>
        | <a href="/blog/categories/%E6%96%87%E7%AB%A0%E8%BD%AC%E8%BD%BD/"><i class="fa fa-bookmark"></i>文章转载</a>
      </span>
    
    
      <span>
        | <i class="fa fa-unlock-alt"></i>UNLOCK
      </span>
    
    <span>
       | <i class="fa fa-calendar"></i>更新时间:2020-7-15 19:23 
    </span>
  </div>
  <h1 class="passage-title">
    【转载】彻底理解js中this的指向
  </h1>
  
  <article class="passage-article">
    <p>该文章为转载文章，因为很多时候看到一篇文章，但过段时间就可能会被删除，所以先转载过来，怕不知道什么时候就没了或找不到。作者要是联系，我也会删除。文章不代表本人观点</p>
<p>【转载】：<a target="_blank" rel="noopener" href="https://www.cnblogs.com/pssp/p/5216085.html">https://www.cnblogs.com/pssp/p/5216085.html</a></p>
<p>　　首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接下来我会深入的探讨这个问题。</p>
<p>　　为什么要学习this？如果你学过面向对象编程，那你肯定知道干什么用的，如果你没有学过，那么暂时可以不用看这篇文章，当然如果你有兴趣也可以看看，毕竟这是js中必须要掌握的东西。</p>
<p>例子1：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">function a()&#123;</span><br><span class="line">    var user = &quot;追梦子&quot;;</span><br><span class="line">    console.log(this.user); //undefined</span><br><span class="line">    console.log(this); //Window</span><br><span class="line">&#125;</span><br><span class="line">a();</span><br></pre></td></tr></table></figure>

<p>按照我们上面说的this最终指向的是调用它的对象，这里的函数a实际是被Window对象所点出来的，下面的代码就可以证明。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">function a()&#123;</span><br><span class="line">    var user = &quot;追梦子&quot;;</span><br><span class="line">    console.log(this.user); //undefined</span><br><span class="line">    console.log(this);　　//Window</span><br><span class="line">&#125;</span><br><span class="line">window.a();</span><br></pre></td></tr></table></figure>
<p>和上面代码一样吧，其实alert也是window的一个属性，也是window点出来的。</p>
<p>例子2：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">var o = &#123;</span><br><span class="line">    user:&quot;追梦子&quot;,</span><br><span class="line">    fn:function()&#123;</span><br><span class="line">        console.log(this.user);  //追梦子</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">o.fn();</span><br></pre></td></tr></table></figure>
<p>　　这里的this指向的是对象o，因为你调用这个fn是通过o.fn()执行的，那自然指向就是对象o，这里再次强调一点，this的指向在函数创建的时候是决定不了的，在调用的时候才能决定，谁调用的就指向谁，一定要搞清楚这个。</p>
<p>其实例子1和例子2说的并不够准确，下面这个例子就可以推翻上面的理论。</p>
<p>如果要彻底的搞懂this必须看接下来的几个例子</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">例子3：</span><br><span class="line"></span><br><span class="line">var o = &#123;</span><br><span class="line">    user:&quot;追梦子&quot;,</span><br><span class="line">    fn:function()&#123;</span><br><span class="line">        console.log(this.user); //追梦子</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">window.o.fn();</span><br><span class="line">　　这段代码和上面的那段代码几乎是一样的，但是这里的this为什么不是指向window，如果按照上面的理论，最终this指向的是调用它的对象，这里先说个而外话，window是js中的全局对象，我们创建的变量实际上是给window添加属性，所以这里可以用window点o对象。</span><br><span class="line"></span><br><span class="line">　　这里先不解释为什么上面的那段代码this为什么没有指向window，我们再来看一段代码。</span><br><span class="line"></span><br><span class="line">var o = &#123;</span><br><span class="line">    a:10,</span><br><span class="line">    b:&#123;</span><br><span class="line">        a:12,</span><br><span class="line">        fn:function()&#123;</span><br><span class="line">            console.log(this.a); //12</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">o.b.fn();</span><br></pre></td></tr></table></figure>
<p>　　这里同样也是对象o点出来的，但是同样this并没有执行它，那你肯定会说我一开始说的那些不就都是错误的吗？其实也不是，只是一开始说的不准确，接下来我将补充一句话，我相信你就可以彻底的理解this的指向的问题。</p>
<p>　　情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找。</p>
<p>　　情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。</p>
<p>　　情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象，例子3可以证明，如果不相信，那么接下来我们继续看几个例子。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">var o = &#123;</span><br><span class="line">    a:10,</span><br><span class="line">    b:&#123;</span><br><span class="line">        // a:12,</span><br><span class="line">        fn:function()&#123;</span><br><span class="line">            console.log(this.a); //undefined</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">o.b.fn();</span><br></pre></td></tr></table></figure>
<p>尽管对象b中没有属性a，这个this指向的也是对象b，因为this只会指向它的上一级对象，不管这个对象中有没有this要的东西。</p>
<p>还有一种比较特殊的情况，例子4：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">var o = &#123;</span><br><span class="line">    a:10,</span><br><span class="line">    b:&#123;</span><br><span class="line">        a:12,</span><br><span class="line">        fn:function()&#123;</span><br><span class="line">            console.log(this.a); //undefined</span><br><span class="line">            console.log(this); //window</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">var j = o.b.fn;</span><br><span class="line">j();</span><br></pre></td></tr></table></figure>
<p>这里this指向的是window，是不是有些蒙了？其实是因为你没有理解一句话，这句话同样至关重要。</p>
<p>　　this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的，例子4中虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window，这和例子3是不一样的，例子3是直接执行了fn。</p>
<p>　　this讲来讲去其实就是那么一回事，只不过在不同的情况下指向的会有些不同，上面的总结每个地方都有些小错误，也不能说是错误，而是在不同环境下情况就会有不同，所以我也没有办法一次解释清楚，只能你慢慢地的去体会。</p>
<p>构造函数版this：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">function Fn()&#123;</span><br><span class="line">    this.user = &quot;追梦子&quot;;</span><br><span class="line">&#125;</span><br><span class="line">var a = new Fn();</span><br><span class="line">console.log(a.user); //追梦子</span><br></pre></td></tr></table></figure>
<p>　　这里之所以对象a可以点出函数Fn里面的user是因为new关键字可以改变this的指向，将这个this指向对象a，为什么我说a是对象，因为用了new关键字就是创建一个对象实例，理解这句话可以想想我们的例子3，我们这里用变量a创建了一个Fn的实例（相当于复制了一份Fn到对象a里面），此时仅仅只是创建，并没有执行，而调用这个函数Fn的是对象a，那么this指向的自然是对象a，那么为什么对象a中会有user，因为你已经复制了一份Fn函数到对象a中，用了new关键字就等同于复制了一份。</p>
<p>　　除了上面的这些以外，我们还可以自行改变this的指向，关于自行改变this的指向请看JavaScript中call,apply,bind方法的总结这篇文章，详细的说明了我们如何手动更改this的指向。</p>
<p>更新一个小问题当this碰到return时</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">function fn()  </span><br><span class="line">&#123;  </span><br><span class="line">    this.user = &#x27;追梦子&#x27;;  </span><br><span class="line">    return &#123;&#125;;  </span><br><span class="line">&#125;</span><br><span class="line">var a = new fn;  </span><br><span class="line">console.log(a.user); //undefined</span><br></pre></td></tr></table></figure>
<p>再看一个</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">function fn()  </span><br><span class="line">&#123;  </span><br><span class="line">    this.user = &#x27;追梦子&#x27;;  </span><br><span class="line">    return function()&#123;&#125;;</span><br><span class="line">&#125;</span><br><span class="line">var a = new fn;  </span><br><span class="line">console.log(a.user); //undefined</span><br></pre></td></tr></table></figure>
<p>再来</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">function fn()  </span><br><span class="line">&#123;  </span><br><span class="line">    this.user = &#x27;追梦子&#x27;;  </span><br><span class="line">    return 1;</span><br><span class="line">&#125;</span><br><span class="line">var a = new fn;  </span><br><span class="line">console.log(a.user); //追梦子</span><br><span class="line">function fn()  </span><br><span class="line">&#123;  </span><br><span class="line">    this.user = &#x27;追梦子&#x27;;  </span><br><span class="line">    return undefined;</span><br><span class="line">&#125;</span><br><span class="line">var a = new fn;  </span><br><span class="line">console.log(a.user); //追梦子</span><br></pre></td></tr></table></figure>
<p>什么意思呢？</p>
<p>　　如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">function fn()  </span><br><span class="line">&#123;  </span><br><span class="line">    this.user = &#x27;追梦子&#x27;;  </span><br><span class="line">    return undefined;</span><br><span class="line">&#125;</span><br><span class="line">var a = new fn;  </span><br><span class="line">console.log(a); //fn &#123;user: &quot;追梦子&quot;&#125;</span><br></pre></td></tr></table></figure>
<p>　　还有一点就是虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">function fn()  </span><br><span class="line">&#123;  </span><br><span class="line">    this.user = &#x27;追梦子&#x27;;  </span><br><span class="line">    return null;</span><br><span class="line">&#125;</span><br><span class="line">var a = new fn;  </span><br><span class="line">console.log(a.user); //追梦子</span><br></pre></td></tr></table></figure>
<p>知识点补充：</p>
<p>　　1.在严格版中的默认的this不再是window，而是undefined。</p>
<p>　　2.new操作符会改变函数this的指向问题，虽然我们上面讲解过了，但是并没有深入的讨论这个问题，网上也很少说，所以在这里有必要说一下。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">function fn()&#123;</span><br><span class="line">    this.num = 1;</span><br><span class="line">&#125;</span><br><span class="line">var a = new fn();</span><br><span class="line">console.log(a.num); //1</span><br></pre></td></tr></table></figure>
<p>　　为什么this会指向a？首先new关键字会创建一个空的对象，然后会自动调用一个函数apply方法，将this指向这个空对象，这样的话函数内部的this就会被这个空的对象替代。</p>
  </article>
  <aside class="table-content" id="site-toc">
  <div class="table-content-title">
    <i class="fa fa-arrow-right fa-lg" id="site-toc-hide-btn"></i>
    <span>目录</span>
  </div>
  <div class="table-content-main">
    
  </div>
</aside>

  
  
  
</div>

    </main>
    
    
<div class="site-footer-wrapper">
<!--
  <div class="footer-top">
    <a class="left" href="/blog/2020/08/12/%E5%85%B3%E4%BA%8E%E5%89%8D%E7%AB%AF%E7%9A%84%E4%BC%AA%E9%9A%8F%E6%9C%BA%E9%97%AE%E9%A2%98/" data-enable="true">
      <i class="fa fa-arrow-left"></i>
    </a>
    <a class="right" href="/blog/2020/01/10/%E3%80%90%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97%E3%80%91GIt-GitHub%E4%BD%BF%E7%94%A8%E4%B8%AD%E4%BA%A7%E7%94%9F%E7%9A%84%E9%97%AE%E9%A2%98/" data-enable="true">
      <i class="fa fa-arrow-right"></i>
    </a>
  </div>
-->
  <footer class="site-footer">
    
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">网站推荐</h5>
          
            <span class="site-footer-item">
              <a href="https://tympanus.net/codrops/" target="_blank">Codrops</a>
            </span>
          
            <span class="site-footer-item">
              <a href="http://taobaofed.org/" target="_blank">淘宝前端团队(FED)</a>
            </span>
          
        </div>
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">文档教程</h5>
          
            <span class="site-footer-item">
              <a href="https://es6.ruanyifeng.com/" target="_blank">ES6入门</a>
            </span>
          
            <span class="site-footer-item">
              <a href="https://developer.mozilla.org/zh-CN/docs/Web" target="_blank">MDN Web文档</a>
            </span>
          
        </div>
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">兴趣前沿</h5>
          
            <span class="site-footer-item">
              <a href="https://threejs.org/" target="_blank">threejs</a>
            </span>
          
            <span class="site-footer-item">
              <a href="https://github.com/justadudewhohacks/face-api.js" target="_blank">face-api</a>
            </span>
          
        </div>
      
    
    <div class="site-footer-info">
      <i class="fa fa-clock-o"></i> 本站已稳定运行<span id="site-time"></span>
    </div>
    
      <div class="site-footer-info">
        <i class="fa fa-paw"></i> 您是本站第 <span id="site-count"></span> 位访客
      </div>
    
    
      <div class="site-footer-info">
        <i class="fa fa-at"></i> Email: xianbin.me@qq.com
      </div>
    
<!--     <div class="site-footer-info">
      <i class="fa fa-copyright"></i> 
      2019 <a href="https://github.com/dongyuanxin/theme-ad/" target="_blank">Theme-AD</a>.
      Created by <a href="https://godbmw.com/" target="_blank">GodBMW</a>.
      All rights reserved.
    </div> -->
  </footer>
</div>
    <div id="site-layer" style="display:none;">
  <div class="site-layer-content">
    <div class="site-layer-header">
      <span class="site-layer-header-title" id="site-layer-title"></span>
      <i class="fa fa-close" id="site-layer-close"></i>
    </div>
    <div class="site-layer-body" id="site-layer-container">
      <div class="site-layer-input" id="site-layer-search" style="display: none;">
        <input type="text">
        <i class="fa fa-search"></i>
      </div>
      
        <div class="site-layer-reward" id="site-layer-reward" style="display: none;">
          
            <div>
              <img src="/blog/images/wechat.png" alt="WeChat">
              
                <p>WeChat</p>
              
            </div>
          
            <div>
              <img src="/blog/images/alipay.png" alt="AliPay">
              
                <p>AliPay</p>
              
            </div>
          
        </div>
      
      <div id="site-layer-welcome" style="display:none;"></div>
    </div>
  </div>
</div>
    

<div class="bottom-bar">

  <div class="bottom-bar-left">
<!--
    <a href="/blog/2020/08/12/%E5%85%B3%E4%BA%8E%E5%89%8D%E7%AB%AF%E7%9A%84%E4%BC%AA%E9%9A%8F%E6%9C%BA%E9%97%AE%E9%A2%98/" data-enable="true">
      <i class="fa fa-arrow-left"></i>
    </a>
    <a href="/blog/2020/01/10/%E3%80%90%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97%E3%80%91GIt-GitHub%E4%BD%BF%E7%94%A8%E4%B8%AD%E4%BA%A7%E7%94%9F%E7%9A%84%E9%97%AE%E9%A2%98/" data-enable="true">
      <i class="fa fa-arrow-right"></i>
    </a>
-->
  </div>

  
  
  
  <div class="bottom-bar-right">
    <a href="javascript:void(0);" data-enable="true" id="site-toc-show-btn">
      <i class="fa fa-bars"></i>
    </a>
    
      <a href="#site-comment" data-enable="true">
        <i class="fa fa-commenting"></i>
      </a>
    
    <a href="javascript:void(0);" id="site-toggle-share-btn">
      <i class="fa fa-share-alt"></i>
    </a>
    
    <a href="javascript:void(0);" id="back-top-btn">
      <i class="fa fa-chevron-up"></i>
    </a>
  </div>
</div>
    <div id="share-btn">
  
  
  
    <a id="share-btn-weibo" href="javascript:void(0);" target="_blank">
      <i class="fa fa-weibo"></i>
    </a>
  
  
    <a id="share-btn-qq" href="javascript:void(0);" target="_blank">
      <i class="fa fa-qq"></i>
    </a>
  
  
</div>
    





    
  </body>
</html>